import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../Base/Config"
import "../Base/UiBase"
import "../Base/UiBase/TC" as TC

MouseArea {
    property alias toLoginPageButton: toLoginPageButton
    property alias phoneInput: phoneInput
    property alias captchaInput: captchaInput
    property alias passwordInput: passwordInput
    property alias verifyPasswordInput: verifyPasswordInput
    property alias registerButton: registerButton
    property alias acceptButton: acceptButton
    property alias getCaptchaButton: getCaptchaButton
    property alias phoneErrorIcon: phoneErrorIcon
    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        // blue block
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 410 * Size.ratio
            color: Color.main

            // 图标：一个火箭
            SvgzImage {
                anchors.centerIn: parent
                width: 280 * Size.ratio
                height: 280 * Size.ratio
                source: "../../resources/login/huojian.svg"
            }

            // 右上角的登录按钮
            MouseArea {
                id: toLoginPageButton
                width: 100 * Size.ratio
                height: 96 * Size.ratio
                anchors.right: parent.right
                anchors.top: parent.top
                Text {
                    anchors.centerIn: parent
                    text: qsTr("登录")
                    font.pixelSize: Size.titleFont
                    color: Color.foreground
                }
            }

            // 快速注册
            Text {
                width: parent.width
                height: 65 * Size.ratio
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: parent.bottom
                text: qsTr("快速注册")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: Size.titleFont
                color: Color.foreground
            }
        }

        //white block
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: Color.foreground
            Column {
                anchors.horizontalCenter: parent.horizontalCenter
                width: 520 * Size.ratio
                height: parent.height
                spacing: 0
                // column: inputs
                Column {
                    width: parent.width
                    topPadding: 55 * Size.ratio
                    bottomPadding: 55 * Size.ratio
                    spacing: Size.elementInterval

                    // 手机号码
                    Rectangle {
                        width: parent.width
                        height: 100 * Size.ratio
                        radius: 20 * Size.ratio
                        color: Color.foreground
                        border.width: 2 * Size.ratio
                        border.color: Color.virtualBorder
                        TextInput {
                            id: phoneInput

                            property bool good
                            anchors.fill: parent
                            focus: true
                            clip: true
                            padding: parent.radius
                            verticalAlignment: TextInput.AlignVCenter

                            font.pixelSize: Size.normalFont
                            color: Color.input

                            selectByMouse: true
                            inputMethodHints: Qt.ImhPreferNumbers
                            activeFocusOnTab: true
                            validator: RegExpValidator {
                                regExp: /(\d{4,4}-){0,1}\d{11,11}/
                            }

                            Text {
                                id: phoneLabel
                                anchors.fill: parent
                                text: qsTr("手机号码")
                                color: Color.virtualInput
                                padding: parent.padding
                                font: parent.font
                                verticalAlignment: parent.verticalAlignment
                                visible: parent.length === 0
                            }
                            ErrorIcon {
                                id: phoneErrorIcon
                            }
                        }
                    }

                    // 验证码
                    RowLayout {
                        width: parent.width
                        height: 100 * Size.ratio
                        spacing: Size.ratio

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.rightMargin: Size.elementInterval
                            radius: 20 * Size.ratio
                            color: Color.foreground
                            border.width: 2 * Size.ratio
                            border.color: Color.virtualBorder
                            TextInput {
                                id: captchaInput

                                anchors.fill: parent
                                clip: true
                                padding: parent.radius
                                verticalAlignment: TextInput.AlignVCenter

                                font.pixelSize: Size.normalFont
                                color: Color.input

                                selectByMouse: true
                                inputMethodHints: Qt.ImhPreferNumbers
                                activeFocusOnTab: true
                                validator: RegExpValidator {
                                    regExp: /\d{4,4}/
                                }

                                Text {
                                    anchors.fill: parent
                                    text: qsTr("验证码")
                                    color: Color.virtualInput
                                    padding: parent.padding
                                    font: parent.font
                                    verticalAlignment: parent.verticalAlignment
                                    visible: parent.length === 0
                                }
                            }
                        }
                        MouseArea {
                            id: getCaptchaButton
                            enabled: phoneInput.good
                            Layout.preferredWidth: 200 * Size.ratio
                            Layout.fillHeight: true
                            Rectangle {
                                anchors.fill: parent

                                radius: 20 * Size.ratio
                                color: Color.main
                                border.width: 2 * Size.ratio
                                border.color: Color.virtualBorder
                                Text {
                                    anchors.fill: parent
                                    clip: true
                                    text: qsTr("获取验证码")
                                    padding: parent.radius
                                    font.pixelSize: Size.normalFont
                                    verticalAlignment: TextInput.AlignVCenter
                                    color: Color.foreground
                                }
                            }
                        }
                    }

                    // 密码
                    Rectangle {
                        width: parent.width
                        height: 100 * Size.ratio
                        radius: 20 * Size.ratio
                        color: Color.foreground
                        border.width: 2 * Size.ratio
                        border.color: Color.virtualBorder
                        TextInput {
                            id: passwordInput
                            anchors.fill: parent
                            clip: true
                            padding: parent.radius
                            verticalAlignment: TextInput.AlignVCenter

                            font.pixelSize: Size.normalFont
                            color: Color.input

                            selectByMouse: true
                            echoMode: TextInput.Password
                            inputMethodHints: Qt.ImhHiddenText | Qt.ImhSensitiveData
                                              | Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText

                            Text {
                                anchors.fill: parent
                                text: qsTr("密码")
                                color: Color.virtualInput
                                padding: parent.padding
                                font: parent.font
                                verticalAlignment: parent.verticalAlignment
                                visible: parent.length === 0
                            }
                        }
                    }

                    // 确认密码
                    Rectangle {
                        width: parent.width
                        height: 100 * Size.ratio
                        radius: 20 * Size.ratio
                        color: Color.foreground
                        border.width: 2 * Size.ratio
                        border.color: Color.virtualBorder
                        TextInput {
                            id: verifyPasswordInput

                            anchors.fill: parent
                            clip: true
                            padding: parent.radius
                            verticalAlignment: TextInput.AlignVCenter

                            font.pixelSize: Size.normalFont
                            color: Color.input

                            selectByMouse: true
                            echoMode: TextInput.Password
                            inputMethodHints: Qt.ImhHiddenText | Qt.ImhSensitiveData
                                              | Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText

                            Text {
                                anchors.fill: parent
                                text: qsTr("确认密码")
                                color: Color.virtualInput
                                padding: parent.padding
                                font: parent.font
                                verticalAlignment: parent.verticalAlignment
                                visible: parent.length === 0
                            }
                            ErrorIcon {
                                visible: parent.length !== 0
                                         && parent.text !== passwordInput.text
                            }
                        }
                    }
                } // end column:inputs

                // column: Register button
                Column {
                    width: parent.width
                    spacing: Size.elementInterval

                    // 注册按钮
                    MouseArea {
                        id: registerButton

                        width: parent.width
                        height: 100 * Size.ratio

                        Rectangle {
                            anchors.fill: parent
                            color: Color.main
                            radius: 20 * Size.ratio
                            Text {
                                anchors.centerIn: parent
                                text: qsTr("注册")
                                font.pixelSize: Size.superLargeFont
                                color: Color.foreground
                            }
                        }
                    }

                    // 同意协议声明
                    Text {
                        anchors.right: parent.right
                        text: qsTr("注册即表示我同意《特长圈服务协议》")
                        color: Color.virtualInput
                        font.pixelSize: Size.smallFont
                        MouseArea {
                            id: acceptButton
                            anchors.fill: parent
                        }
                    }
                } // end column: Register button
            }
        }
    }
}
